<template>
    <div>
        <div class="btn_group">
		    </div>
        <el-table :data="tableData" style="width: 100%" :row-style="{fontWeight: 600, textAlign: 'center'}" :cell-style="{textAlign: 'center'}" :header-cell-style="{textAlign: 'center'}" >
          <el-table-column prop="b_name" label="对战名称" width="250" />
          <el-table-column prop="create_time" label="对战开始时间" width="200" />
          <el-table-column prop="detail" label="详细"  >
              <template #default="scope">
                  <div class="detail">
                      <el-button type="success" size="small" @click="handleDetail(scope.row.env.split('.')[0])">详情</el-button>
                      <el-button type="primary" size="small" @click="handleLog(scope.row.env.split('.')[0], scope.row.b_name)">对战日志</el-button>
                      <el-button type="warning" size="small" @click="handleReplay(scope.row.env.split('.')[0], scope.row.b_name)">回放下载</el-button>
                  </div>
              </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination layout="prev, pager, next" :total="10"></el-pagination>
        </div>
        <el-dialog
          v-model="detailDialog"
          title="详情"
          width="50%"
          :before-close="handleClose"
        >
          <h4 v-html="detailData"></h4>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="detailDialog = false"
                >关闭</el-button
              >
            </span>
          </template>
        </el-dialog>
    </div>
</template>

<script>
import { dateFormate, funDownload } from '../../assets/js/helper'
import { getLog, getDetail } from './api'
import * as vsApi from './api'

export default {
  data () {
    return {
      tableData: [],
      showSelect: false,
      multipleSelection: [],
      dialogVisible: false,
      detailDialog: false,
      videoDialog: false,
      videoSrc: '',
      videoKey: '',
      detailData: ''
    }
  },
  methods: {
    query () {
      vsApi.battleList().then(res => {
        this.tableData = res
      })
    },
    handleCreate () {
      this.dialogVisible = true
    },
    handleSelect () {
      this.showSelect = !this.showSelect
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleDelete () {
      this.tableData = this.tableData.filter(item => !this.multipleSelection.includes(item))
      this.showSelect = false
    },
    handleConfirm () {
      const date = dateFormate(new Date())
      const form = this.form
      if (form.name === '') return
      const newData = {
        beginAt: date,
        ...form
      }
      this.tableData.push(newData)
      this.dialogVisible = false
    },
    handleClose (done) {
      done()
    },
    handleDetail (key) {
      this.detailDialog = true
      getDetail(`${key}.txt`).then(res => {
        const index = res.indexOf('Draw')
        res = res.substring(0, index + 7) + '<br/>' + res.substring(index + 7)
        this.detailData = res
      })
    },
    handleLog (id, name) {
      getLog(`${id}.txt`).then(res => {
        funDownload(res, `${name}.txt`)
      })
    },
    handleReplay (key, name) {
      window.open(`http://192.168.43.58:10086/filesystem/video/${key}.map/${name}`)
    }
  },
  mounted () {
    this.query()
  }
}
</script>

<style lang="scss" scoped>
    .block {
        position: absolute;
        right: 20px;
        margin-top: 30px;
    }
    .detail {
        text-align: center;
        .el-button {
            margin: 0 20px;
        }
    }
</style>
